<template>
	<view >
		
		
		<view class="good-list mtop">
			<template v-for="(v,index) in kefu_list">
				
				<view class="item">
					
					<view class="image-view">
						<image class="image" :src="v.img"></image>
					</view>
					
					<view class="info-view">
						<view class="title">
							{{v.name}}
						</view>
						<view class="desc">
							{{v.sub_info}}
						</view>
					</view>
					
					<view class="btn-view">
						<view class=" btn" @tap="show_kefu(index,true)">
							加好友
						</view>
					</view>
					
				</view>
				
			</template>
			
		</view>
		
		
		<view v-if="kefu_list && kefu_list.length > 0" class="mask" v-show="show_mask" @tap="show_kefu(0,false)">
			
			<view class="alert">
				<view class="title">
					{{kefu_list[kefu_index].name}}
				</view>
				<view class="qrcode">
					<image :src="kefu_list[kefu_index].qrcode"></image>
				</view>
				<view class="sub">
					长按二维码
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show_mask:false,
				kefu_list:[],
				kefu_index:0
			}
		},
		onLoad() {
			this.getKefuList();
		},
		methods: {
			show_kefu(index,flag)
			{
				this.kefu_index = index;
				this.show_mask = flag;
			},
			getKefuList()
			{
				this.$request("server/getServerList",{},'POST').then(res=>{
					
					this.kefu_list = res;
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.search-view{
		padding: 0.3rem 1rem;
		
		.search{
			background: #eee;
			padding: 0.5rem;
			border-radius: 1rem;
		}
	}
	
	
	.mtop{
		margin-top: 1rem;
	}
	
	.good-list{
		
		.item{
			display: flex;
			justify-content: space-between;
			padding: 1rem;
			align-items: center;
			
			
			.info-view{
				width: 50%;
				padding: 0 1rem;
				
				.title{
					font-size: 30rpx;
					font-weight: bold;
				}
				
				.desc{
					word-break:break-all;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
			}
			
			.image-view{
				
				.image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}
			}
			
			.btn-view{
				
				font-size: 20rpx;
				
				
				.btn{
					border: #007AFF solid 4rpx;
					border-radius: 1rem;
					padding: 10rpx 20rpx;
					color: #007AFF;
				}
				
				
			}
			
		}
		
	}
	
	.mask{
		background: rgba($color: #7d7d7d, $alpha: 0.5);
		position: fixed;
		height: 100vh;
		width: 100vw;
		top: 0;
		
		.alert{
			width: 70vw;
			height: 70vw;
			background-color: #FFFFFF;
			position: fixed;
			top: 20vh;
			left: 15vw;
			border-radius: 1rem;
			text-align: center;
			
			.title{
				padding: 5%;
			}
			
			.qrcode{
				
				padding: 10%;
				
				image{
					height: 200rpx;
					width: 200rpx;
				}
				
			}
			
			.sub{
				color: #c6c8c8;
				padding: 5%;
			}
			
		}
		
	}
	
</style>
